<template>
    <el-dialog top="5%" :title="title" size="large" v-model="editFormVisible" :close-on-click-modal="false">
        <el-tag  style="font-size: larger; margin: 30px 0px 10px 20px;">发货单详情</el-tag>
        <div style="border: 1px solid #bbb; padding: 20px;">
            <el-form  ref="form" :model="form" :inline="true" :rules="rules" label-width="110px">
                <el-form-item label="发货单编号">
                    <el-input disabled  v-model="form.FDeliveryNo" style="width:250px;"></el-input>
                </el-form-item>
                <el-form-item label="发货仓库"   prop="FStonehouseID">
                    <sy-select v-model="form.FStonehouseID"  valueKey="FID" style="width:250px"
                               optionData="server/setting/Stonehouse.ashx?cmd=GetOptions">
                    </sy-select>
                </el-form-item>
                <el-form-item label="发货时间">
                    <el-date-picker type="date"  v-model="form.FDeliveryTime"  style="width:250px"></el-date-picker>
                </el-form-item>
                <el-form-item label="收货人">
                    <el-input v-model="form.FReceiveUser" style="width:250px;"></el-input>
                </el-form-item>
                <el-form-item label="收货地址">
                    <el-input v-model="form.FShippingAddress" style="width:250px;"></el-input>
                </el-form-item>
                <el-form-item label="购买单位">
                    <el-input v-model="form.FCompany" style="width:250px;"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.FNote" style="width:250px;"></el-input>
                </el-form-item>
            </el-form>

            <el-table
                    :data="listdata"
                    border
                    v-loading="listLoading"
                    style="width: 100%">
                <el-table-column
                        prop="FProductID"
                        label="产品"
                        width="280">
                    <template scope="scope">
                        <sy-select v-model="scope.row.FProductID"  valueKey="FID" @change="changeproduct" :extendData="scope.row"
                                   placeholder="请输入过滤选择"
                                   remote  :optionData="'server/setting/Product.ashx?cmd=GetOptions1&where='+productwhere">
                        </sy-select>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="ProductModel"
                        label="规格"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="ProductUnitName"
                        label="单位"
                            width="150">
                </el-table-column>
                <el-table-column
                        prop="FPrice"
                        label="单价"
                        width="120">
                    <template scope="scope">
                        <el-input type="number" @change="datachange(scope.row)"  v-model="scope.row.FPrice"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="FQuantity"
                        label="数量"
                        width="120">
                    <template scope="scope">
                        <el-input type="number" @change="datachange(scope.row)"  v-model="scope.row.FQuantity"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="Total"
                        label="总价"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop=""
                        label="操作">
                    <template scope="scope">
                        <a  href="javascript:;" @click="addRow"><i style="color:#8391a5" class="el-icon-plus"></i></a>
                        <a style="margin-left: 10px;"  href="javascript:;" @click="delRow(scope.$index)"><i style="color:#8391a5" class="el-icon-delete"></i></a>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right; font-size:larger;color:red;margin-right:100px;margin-top:10px;">总价：{{totalprice}}元</div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false">取 消</el-button>
            <el-button type="primary" v-if="showSave" @click="save" :loading="loading">保存</el-button>
        </div>

    </el-dialog>

</template>

<script>
    import util from '../../common/util'
    import mixin from '../../common/mixin'
    import Vue from 'vue'
    export default {
        data() {
            return {
                form: {},
                showSave:true,
                rules: {
                    // FName: [{type: "date",name:"FCreateDate",text:"跟进时间", value: null}]
                },
                loading:false,
                editFormVisible:false,
                title:'',
                listdata: [],
                listLoading:false,
                showcontent:true
            }
        },
        computed: {
            productwhere: function () {
                let result=[]
                for(let pro of this.listdata){
                    if(pro.FProductID) {
                        result.push(pro.FProductID)
                    }
                }
                if(result.length==0)
                {
                    return ""
                }
                return ','+result.join(',')+','
            },
            totalprice:function(){
                let result=0;
                for(let pro of this.listdata){
                    if(pro.Total){
                        result = result+pro.Total;}
                }
                return result
            }

        },
        methods: {
            switchLoading(flag){
                this.loading = flag;
            },
            _openEdit(record) {
                this.editFormVisible = true;
                this.form = Object.assign({},record);
                this.title = '编辑'
                if(record.FApproveStatus==0) {
                    this.title = '编辑'
                }else{
                    this.title='查看'
                    this.showSave=false
                }
                util.get("server/business/DeliveryDetail.ashx?cmd=GetList",
                    {where:"FDeliveryID="+this.form.FID},this.switchLoading,result=>{
                        this.listdata = result.listdata
                    })
            },
            _openAdd(record) {
                this.editFormVisible = true;
                this.form = {FID:0,FDeliveryNo:'',FDeliveryTime:'',FReceiveUser:'',FShippingAddress:'',
                    FAddTime:new Date(),FDeliveryUser:global.user.FID,listdata:[],FApproveStatus:0,FType:1,FCompany:'',FStonehouseID:1};
                this.title = '新增'
                this.listdata.push({FProductID: '',ProductModel:'',FPrice:'',FQuantity:'',Total:null})
                util.get("server/business/Delivery.ashx?cmd=GetDeliveryNo",
                    null,this.switchLoading,result=>{
                        this.form.FDeliveryNo = result.deliveryno
                    })
            },
            save:function () {
                if(this.form.FStonehouseID==0||this.form.FStonehouseID=='') {
                    util.msgWarning("请选择发货仓库")
                    return;
                }
                if(!this.listdata || this.listdata[0].FProductID=='') {
                    util.msgWarning("请选择要外销的货物")
                    return;
                }
                this.form.listdata = JSON.stringify(this.listdata);
                util.post("server/business/Delivery.ashx?cmd=Save",this.form,this.switchLoading,result=> {
                    util.msgSuc("保存成功")
                    this.editFormVisible = false
                    this.$emit("onSaveSuc", this.form)
                })
            },
            changeproduct(val,record,row){
                row.ProductModel = record.FModel
                row.ProductUnitName = record.UnitName
                row.FPrice = record.FPrice
                row.Total = ''
                row.FQuantity=''
            },
            addRow(){
                this.listdata.push({FProductID: '',ProductModel:'',FQuantity: '',FPrice:'',Total:null})
            },
            delRow(index){
                this.listdata.splice(index,1);
                if(this.listdata.length==0)
                {
                    this.listdata.push({FProductID: '',ProductModel:'',FQuantity: '',FPrice:'',Total:null})
                }
            },
            datachange(row){
                row.Total = row.FPrice*row.FQuantity;
            }
        },
        mounted() {

        }
    }
</script>
